<template>
  <div id="playing_list">
    <div class="title border-1px border-1px-after">
      <img :src="playModeImg" alt="playModeName"
        @click="changePlayMode">
      <p class="title_text">{{ playModeName }} {{ playList.length }}首歌曲</p>
      <p class="close_button"
        @click="hidePlayingList"
        @touchend.prevent="hidePlayingList">完成</p>
    </div>

    <div class="song_list">
      <ul>
        <li class="border-1px border-1px-after item"
          v-for="(item, i) in playList" :key="i">
          <div class="song_info" @click="play(i)">
            <p class="song_name">{{ item.name }}</p>
            <p class="song_author">-{{ item.singer | singer }}</p>
            <img src="/static/images/icon-playing.svg" class="isPlaying"
              v-show="i == index">
          </div>
          <div class="action_button" @click="showMenu(i)">
            <img src="/static/images/icon-...black.png">
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import * as def from '../../../../config/def'

export default {
  name: 'playinglist',
  methods: {
    hidePlayingList() {
      this.$store.commit('closePlayingList')
    },
    play(index) {
      this.$store.commit('playIndex', index)
    },
    showMenu(index) {
      const that = this

      this.$store.dispatch('notifyActionSheet', {
        menus: {
          'title.noop': this.playList[index].name +
                        `<br><span style="color:#666;font-size:12px">
                        ${this.getSingerStr(this.playList[index].singer)}</span>`,
          delete: '删除'
        },
        handler: {
          ['cancel']() {},
          ['delete']() {
            that.$store.commit('deleteFromPlayList', index)
          }
        }
      })
    },
    getSingerStr(val) {
      if(typeof val === 'string') {
        return val
      } else if(val instanceof Array) {
        let singer = ''
        val.forEach(item => {
          singer = singer + item.name + ' '
        })
        return singer
      }
    },
    ...mapMutations([ 'changePlayMode' ])
  },
  computed: {
    playModeImg() {
      return def.PLAY_MODE_IMG[this.playMode]
    },
    playModeName() {
      return def.PLAY_MODE_NAME[this.playMode]
    },
    ...mapState({
      playList: state => state.PlayService.playList,
      playMode: state => state.PlayService.playMode,
      index: state => state.PlayService.index
    })
  },
  filters: {
    singer: val => {
      if(typeof val === 'string') {
        return val
      } else if (val instanceof Array) {
        let singer = ''
        val.forEach(item => {
          singer = singer + item.name + ' '
        })
        return singer
      }
    }
  }
}
</script>

<style lang="less" scoped>
  * {
    margin: 0;
    padding: 0;
  }
  #playing_list {
    width: 100%;
    max-width: 68vh;
    min-height: calc(100% - 90px);
    min-height: -webkit-calc(100% - 90px);
    min-height: -moz-calc(100% - 90px);
    min-height: -o-calc(100% - 90px);
    background: #fff;
    position: absolute;
    z-index: 10;
    .title {
      width: 100%;
      max-width: 68vh;
      height: 50px;
      background: #fff;
      position: fixed;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 3;
      img {
        width: 35px;
        height: 25px;
        padding-left: 10px;
        cursor: pointer;
      }
      .title_text {
        font-size: 16px;
        color: #000;
        padding-left: 5px;
        flex: 1;
      }
      .close_button {
        font-size: 16px;
        color: #000;
        margin-right: 10px;
        cursor: pointer;
      }
    }
    .song_list {
      margin-top: 50px;
      ul {
        list-style: none;
        li {
          height: 40px;
          margin-left: 10px;
          padding: 5px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          box-sizing: content-box;
          .song_info {
            height: 40px;
            display: flex;
            align-items: center;
            flex: 1;
            overflow: hidden;
            cursor: pointer;
            img {
              width: 15px;
              height: 15px;
              margin-left: 15px;
            }
            .song_name {
              font-size: 16px;
              color: #000;
              line-height: 20px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .song_author {
              font-size: 12px;
              color: #8f8f8f;
              line-height: 20px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .action_button {
            width: 20px;
            height: 20px;
            padding: 10px;
            box-sizing: content-box;
            img {
              width: 20px;
              height: 20px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }

  .border-1px {
    position: relative;
  }
  .border-1px::before {
    top: 0;
  }
  .border-1px::after {
    bottom: 0;
  }
  .border-1px-after::after {
    content: '';
    display: block;
    width: 100%;
    border-top: 1px solid #d0d0d0;
    position: absolute;
    left: 0;
  }
</style>
